<template>
	<view class="container">
		<!-- #ifdef H5 -->
		<uni-header></uni-header>
		<!-- #endif -->

		<view class="product-box com-box">
			<view class="goods-list">
				<view v-for="(item, index) in goodsList" :key="index" class="goods-item" @click="navToDetailPage(item)">
					<view class="image-wrapper">
						<image :src="item.goodsPic" mode="aspectFill" lazy-load></image>
					</view>
					<view class="text-wrapper">
						<text class="title clamp2">{{item.goodsName}}</text>
						<text class="price">￥{{item.price}}</text>
						<text class="size">{{item.specification}}</text>
						<view class="shop clamp">
							<image :src="item.goodsPic" mode="aspectFill"></image>
							{{item.goodsName}}
						</view>
					</view>
				</view>
			</view>

			<!-- #ifdef H5 -->
			<uni-pagination :num='pageNum' :page='pages' @pagechange="pagechange"></uni-pagination>
			<!-- #endif -->
			<uni-load-more class="sp" :status="loadingType"></uni-load-more>

			<!-- #ifdef H5 -->
			<view class="bid-add_btn pc" @click="naviageToPage('/pages/ex/product/add')">发布</view>
			<!-- #endif -->
			<view class="bid-add_btn sp" @click="naviageToPage('/pages/ex/product/add')">
				<image src="/static/tab-bid-current.png" mode="scaleToFill"></image>
			</view>
		</view>

		<uni-nav-bar :tabIndex="2"></uni-nav-bar>

		<!-- #ifdef H5 -->
		<uni-footer></uni-footer>
		<!-- #endif -->

	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more.vue'
	import uniNavBar from '@/components/uni-nav-bar.vue'
	import uniHeader from '@/components/h5/uni-header.vue'
	import uniFooter from '@/components/h5/uni-footer.vue'
	import uniPagination from '@/components/h5/uni-pagination.vue'
	export default {
		components: {
			uniLoadMore,
			uniNavBar,
			uniHeader,
			uniFooter,
			uniPagination
		},
		data() {
			return {
				loadingType: 'more', //加载更多状态
				goodsList: [],
				pageNum: 1,
				pageSize: 10,
				pages: 0
			}
		},
		onShow() {
			// #ifdef MP-WEIXIN
			if (wx.hideHomeButton) {
				wx.hideHomeButton()
			}
			// #endif
		},
		onLoad(option) {
			this.loadData()
		},
		//下拉刷新
		onPullDownRefresh() {
			this.loadData('refresh')
		},
		//加载更多
		onReachBottom() {
			this.loadData()
		},
		methods: {
			pagechange(currentPage) {
				console.log(currentPage)
				// ajax请求, 向后台发送 currentPage, 来获取对应的数据
				uni.showLoading({
					title: '正在加载'
				})
				this.pageNum = currentPage
				this.loadData('current')
			},
			//加载商品 ，带下拉刷新和上滑加载
			loadData(type = 'add') {
				//没有更多直接返回
				if (type === 'add') {
					if (this.loadingType === 'nomore') {
						return
					}
					this.loadingType = 'loading'
				} else {
					this.loadingType = 'more'
				}
				if (type === 'refresh') {
					this.pageNum = 1
				}
				this.loadingType = 'loading'
				this.$api.request('/zrGoods/goodsListp', {
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}, {
					content: 'application/x-www-form-urlencoded',
					method: 'GET'
				}).then(res => {
					let tempList = res.data.records
					if (type !== 'add') {
						this.goodsList = []
					}
					this.pages = Math.ceil(res.data.total / this.pageSize)
					this.loadingType = this.pageNum < this.pages ? 'more' : 'nomore'
					this.goodsList = this.goodsList.concat(tempList)
					this.pageNum = this.pageNum + 1
					if (type !== 'add') {
						uni.hideLoading()
						uni.stopPullDownRefresh()
					}
				})
			},
			//发布
			naviageToPage(page) {
				uni.navigateTo({
					url: page
				})
			},
			//详情
			navToDetailPage(item) {
				if (item.id) {
					uni.navigateTo({
						url: `/pages/ex/product/detail?id=${item.id}`
					})
				}
			},
		},
	}
</script>

<style lang="scss">
	.container {
		padding-bottom: 100upx;
	}

	.bid-add_btn {
		position: fixed;
		left: 0;
		bottom: 100upx;
		width: 100%;
		height: 80upx;
		z-index: 500;


		image {
			margin: 0 auto;
			width: 80upx;
			height: 100%;
			display: block;
		}
	}

	.product-box {
		padding-top: 20upx;
	}

	/* 商品列表 */
	.goods-list {
		margin-bottom: 0;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 750px) {
		.container {
			padding-bottom: 0;
		}

		.product-box {
			margin: 20px auto;
			padding: 0;
		}

		.bid-add_btn {
			position: relative;
			left: auto;
			bottom: auto;
			bottom: auto;
			cursor: pointer;
			margin-top: 20px;
			margin-left: auto;
			width: 160px;
			height: 50px;
			font-size: 16px;
			color: #fff;
			line-height: 50px;
			background-color: $base-color-pc;
			text-align: center;
		}

		/* 商品列表 */
		.goods-list {
			margin: 0 0 20px;
			padding: 20px 20px 0;

			.goods-item {
				margin: 0 16px 30px;
			}
		}
	}

	/* #endif */
</style>
